<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }

        div {
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 遍历数组  返回数组的每个元素(值) -->
        <button @click="sortHandler">从大到小</button>
        <button @click="addEle">新增元素</button>
        <button @click="EditEle">修改数组</button>
        <ul>
            <li v-for="(item,index) in list" :key="index">
                {{item}}
            </li>
        </ul>
    </div>
</body>
<script>

    // 数组的方法检测
    // 变更方法   => Vue  将被侦听的数组的变更方法(影响原数组)进行了包裹 => 所以它们也将会触发视图更新
    // push()
    // pop()
    // shift()
    // unshift()
    // splice()
    // sort()
    // reverse()


    // 非变更方法  => 例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组 => 不会触发视图更新?如何解决
    // 当使用非变更方法时，可以用新数组替换旧数组：



    // 需求:将数组中的每个元素放到对应的li标签内
    var vm = new Vue({
        el: "#app",
        data: {
            list: [1, 4, 7, 2, 5, 8, 3, 6, 9],

        },
        methods: {
            sortHandler() {
                this.list.sort(function (a, b) {
                    return a - b;
                })
            },
            addEle() {
                var num = Math.round(Math.random() * 30);

                // 变更方法  => 影响原数组 -> 触发视图更新
                // this.list.push(num);

                // concat => 数组拼接 => 返回拼接后的新数组(不影响原数组)
                // this.list.concat(num);  // 不影响原数组 => 不会更新视图
                this.list = this.list.concat(num);  //解决方法
            },
            EditEle() {

                // 下标赋值 不属于 变更方法/非变更方法  => Vue无法检测此种情况下数组的更新 => 视图不会更新
                // this.list[3] = 22;  //修改数组的元素
                // this.list.length--;
                // console.log(11111, this.list);

                // 解决方法
                // 1. 修改数组中的元素建议使用 splice()  =>  变更方法
                // this.list.splice(3, 1, 22);

                // 2. 使用Vue.set(target,key,val)  或 vm.$set(target,key,val)    => 同一个方法,存在了两个不同的位置
                // target  目标数据(对象,数组)
                // key     对象的键名/数组的下标
                // val     更新的数据

                // 通过Vue.set()  vm.$set() 操作 对象和数组 -> 被Vue检测到 => 更新视图

                // console.log(Vue.set);   // Vue的静态方法
                // console.log(this.$set); // 实例化对象都可以使用的方法 (Vue.prototype.)
                // console.log(Vue.set == this.$set);

                // this.$set(this.list, 3, 22);


                // 3. 强制更新视图
                this.list[3] = 22;
                this.$forceUpdate(); // 强制更新视图




            }
        }

    })



</script>

</html>